<!-- SideMenu.vue -->
<template>
    <div class="side-menu">
        <div class="menu-item" v-for="(item, index) in menuList" :key="index" :class="{ active: item.active }"
            @click="handleClick(item, index)">
            <div class="content">
                {{ item.title }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { computed } from 'vue'

// 接收父组件传入的菜单列表
const props = defineProps({
    menuList: {
        type: Array,
        required: true
    }
})

const router = useRouter()

const emit = defineEmits(['update:menuList'])

const handleClick = (item, index) => {
    // 更新菜单 active 状态
    const newList = props.menuList.map((menu, i) => ({
        ...menu,
        active: i === index
    }))
    emit('update:menuList', newList)

    // 路由跳转
    if (item.router) {
        router.push(item.router)
    }
}
</script>

<style scoped lang="scss">
.side-menu {
    width: 160px;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.menu-item {
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
    background-color: #0099ff;
    color: #fff;

    .content {
        border-left: 3px solid #0099ff;
        margin: 6px 6px 6px 0;
        padding-left: 16%;
    }
}

.menu-item:hover {
    background-color: #fff;
    color: #0099ff;
    font-weight: 500;
}

.menu-item.active {
    background-color: #fff;
    color: #0099ff;
    font-weight: 500;
}
</style>
